<template>
  <div class="list">
    <h2>MyDemo</h2>
    <hr />
    <ul>
      <li>
        <router-link to="/stars">stars</router-link>
      </li>
      <li>
        <router-link to="/stars2">stars2</router-link>
      </li>
      <li>
        <router-link to="/mouse">mouse-demo</router-link>
      </li>
      <li>
        <router-link to="/study">study</router-link>
      </li>
    </ul>
  </div>
</template>

<script></script>

<style lang="less" scoped>
.list {
  h2 {
    font-weight: 800;
    text-shadow: 5px 5px 5px #000000;
  }
  hr {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 80%;
    box-shadow: 0.125rem 0.125rem 0.3125rem #cccccc;
  }
  ul {
    margin-top: 0.625rem;
    display: flex;
    li {
      text-shadow: 2px 2px 2px #cccccc;
      &:hover {
        text-shadow: 0 0 0 #000000;
      }
    }
  }
}
</style>
